{% extends 'base.html' %}

{% load crispy_forms_tags humanize %}

{% block content %}
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="{% url 'teachers:quiz_change_list' %}">My Quizzes</a></li>
      <li class="breadcrumb-item"><a href="{% url 'teachers:quiz_change' quiz.pk %}">{{ quiz.name }}</a></li>
      <li class="breadcrumb-item active" aria-current="page">Results</li>
    </ol>
  </nav>
  <h2 class="mb-3">{{ quiz.name }} Results</h2>
  <p class="lead">Total Questions: {{total_questions}}</p>
  <div class="card">
    <div class="card-header">
      <strong>Taken Quizzes</strong>
      <span class="badge badge-pill badge-primary float-right">Average Score: {{ quiz_score.average_score|default_if_none:0.0|floatformat:2 }}</span>
    </div>
    <table class="table mb-0">
      <thead>
        <tr>
          <th>Student</th>
          <th>Date</th>
          <th>Score</th>
          <th>Percentage</th>
        </tr>
      </thead>
      <tbody>
        {% for taken_quiz in taken_quizzes %}
          <tr>
            <td>{{ taken_quiz.student.user.username }}</td>
            <td>{{ taken_quiz.date|naturaltime }}</td>
            <td>{{ taken_quiz.score }}</td>
            <td>{{ taken_quiz.percentage }}</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
    <div class="card-footer text-muted">
      Total respondents: <strong>{{ total_taken_quizzes }}</strong>
    </div>
  </div>
{% endblock %}
